
import React from 'react';
import {Button,Row,Col} from 'antd';
import {DeleteOutlined,FormOutlined,ForkOutlined} from '@ant-design/icons';
import {withRouter} from 'react-router-dom'
import './css/ProductsDetails.css'

class ProductsDetails extends React.Component {
    constructor(){
        super()
        this.state ={
            imgSrc:[],
            selectSpan:1
        }
    }
    select1(){
        this.setState({
            selectSpan:1
        })
    }
    select2(){
        this.setState({
            selectSpan:2
        })
    }
    backList(){
        this.props.history.push('/homepage/productslist')
    }
    editInfo(){
        this.props.history.push({pathname:'/homepage/AddProducts',query:this.props.location.query})
    }
    render() {
        let data = this.props.location.query
        console.log(data)
        return (
            <div>
                <Row id='head'>
                    <Col span={12}>
                        <span id='myHead'>该商品{data.goods_status}</span>
                    </Col>
                    <Col id='rightHead' span={12}>
                        <span onClick={this.editInfo.bind(this)}><FormOutlined/>修改</span>
                        <span><DeleteOutlined/>删除</span>
                        <span><ForkOutlined/>分享</span>
                    </Col>
                </Row>
                <Row id='content'>
                    <Col span={6}>
                        <img src={data.goodsImgSrc} id='bigImage'/>
                        {/*<div>*/}
                        {/*    <img/>*/}
                        {/*</div>*/}
                    </Col>
                    <Col span={18}>
                        <h2>{data.goodsName}</h2>
                        <span><span className='mySpan'>分类：</span><span className='rightSpan'>{data.goods_type_name}</span></span>
                        <span id='centerSpan'><span className='mySpan'>编码：</span><span className='rightSpan'>{data.key}</span></span>
                        <span><span className='mySpan'>条形码：</span><span className='rightSpan'>155648</span></span>
                        <div id='myPrice'>
                            <p>市场价：{data.goodsMarketPrice}</p>
                            <p>成本价：{data.referenceCostPrice}</p>
                        </div>
                        <Row className='proTitle'>
                            <Col>
                                <p>颜色</p>
                                <Button>白色</Button>
                            </Col>
                        </Row>
                        <Row className='proTitle'>
                            <Col>
                                <p>尺码</p>
                                <Button>白色</Button>
                            </Col>
                        </Row>
                        <Row className='proTitle'>
                            <Col>
                                <p>材质</p>
                                <Button>白色</Button>
                            </Col>
                        </Row>
                        <Row id='myNum' className='proTitle'>
                            <Col>
                                <span>库存：<span>{data.stock_number}</span></span>
                                <span>预购：<span>{data.pre_order_number}</span></span>
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row id='proDetails'>
                    <Col span={24}>
                        <div id='myDetails'>
                            <span onClick={this.select1.bind(this)} className={this.state.selectSpan===1?'selectedSpan':'unselected'}>商品介绍</span>
                            <span onClick={this.select2.bind(this)} className={this.state.selectSpan===2?'selectedSpan':'unselected'}>商品附件</span>
                        </div>
                        <div id='myContent'>
                            <div style={{display:this.state.selectSpan===1?'block':'none'}}>
                                <span>暂无介绍</span>
                            </div>
                            <div style={{display:this.state.selectSpan===2?'block':'none'}}>
                                <span>暂无附件</span>
                            </div>
                        </div>
                    </Col>
                </Row>
                <Row id='bottomRow'>
                    <Col>
                        <Button onClick={this.backList.bind(this)}>返回</Button>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default withRouter(ProductsDetails);